<template>
  <el-row>
    <el-container v-if="containerType === 'primary'">
      <el-aside :width="asideWidth" v-if="showAside">
      </el-aside>
      <el-container>
        <el-header v-if="showHeader">
        </el-header>
        <el-main v-if="showMain">
        </el-main>
        <el-footer v-if="showFooter">
        </el-footer>
      </el-container>
    </el-container>
  </el-row>
</template>

<script>
export default {
  name: "MyContainer",
  components: {},
  props: {
    componentType: {
      type: String,
      default: "container"
    },
    containerType: {
      type: String,
      default: "primary"
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    showMain: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    showAside: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return{
      asideWidth: '200px',
      asideFont: 'asideFont',
    }
  },
}
</script>

<style scoped>
.el-header, .el-footer {
  text-align: center;
  line-height: 60px;
}

.el-aside {
  text-align: center;
  line-height: 200px;
}

.el-main {
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>